<template>
    <div>
    <van-nav-bar title="宠友圈"  left-arrow class="a1" @click-right="$router.push('/c')" :border="false">
  <template #right>
    <van-icon name="search" size="18" />
  </template>
</van-nav-bar>
    
    <div class="bj">
    <div class="b">
        <div class="b1">
             <div class="b11">
                <img src="../tu/cw.png">
             </div>
             <div class="b12">
                <h2>一级铲屎官</h2>
                <div class="b121"> 
                    <img src="../tu/cw.png">
                    <span>上海市xxxxx</span>
                </div>
             </div>
             <span class="b13">
                +关注
             </span>
        </div>
        <div class="b2">
            <span>天气不错，带我家狗子出来耍一耍</span>
        </div>
        <div class="b3">
            <img src="../tu/wan.png">
            <img src="../tu/wan.png">
            <img src="../tu/wan.png">
            <img src="../tu/wan.png">
            <img src="../tu/wan.png">
            <img src="../tu/wan.png">
        </div>
        <div class="b4">
            <div>
                <img src="../tu/new.png">
                <span>10</span>
            </div>
            <div>
                <img src="../tu/new.png">
                <span>23</span>
            </div>
        </div>
        <div class="b5">
            <div>
                <img src="../tu/new.png">
                <span>SMLILE:</span>
                <span>你家狗子又长个拉</span>
            </div>
            <br>
            <div>
                <img src="../tu/new.png">
                <span>SMLILE:</span>
                <span>你家狗子又长个拉</span>
            </div>
        </div>
    </div>
    </div>
    </div>
</template>

<script>
import { Button } from 'vant';
    export default {
        components: {
    [Button.name]: Button,
  },
    }
</script>

<style scoped>
    .bj{
        background-color: #ee92bc;
        height: 100vh;
        width: 100vw;
        padding: 20px 0;
    }
    .a1{
        background:#ee92bc;
    }
    .b{
        border-radius: 5px;
        background-color: white;
        width: 90%;
        height:58vh;
        margin: 0 auto;
        padding: 15px 8px 10px;
        box-sizing: border-box;
    }
    .b1{
        display: flex;
    }
    .b11{
        width: 70px;
        height: 70px;
        border-radius: 50px;
        background-color: green;
    }
    .b11 img{
        width: 70px;
        height: 100%;
        display: block;
        border-radius: 50px;
    }
    .b12{
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-left: 5px;

    }
    .b121 >span{

    }
    .b121 img{
        width:10px;
        height: 10px;
    }
    .b12 h2{
        font-size:15px;
        margin-top: 8px;
    }
    .b13{
        margin-left: 95px;
        padding: 4px 10px;
        background-image: linear-gradient(180deg, #ed8b6b, #fe719b);
        height: 20px;
        border-radius: 10px;
        margin-top: 23px;
        line-height: 20px;
    }
    .b121{
        margin: 5px 0;
    }
    .b121 span{
        font-size:12px;
    }
    .b2{
        margin-top: 20px;
        font-size: 14px;
    }
    .b3{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .b3 img{
        width: 28vw;
        height: 13vh;
    }
    .b4{
        display: flex;
        justify-content: end;

    }
    .b4 img{
        width: 4vw;
        height:3vh;
    }
    .b4 div span{
        height: 3vh;
        display: inline-block;
        line-height: 3vh;
        margin: 0 5px;
    }
    .b4 div{
        display: flex;
    }
    .b5{
        display:flex;
        flex-direction: column;
        border-top: 1px solid black;
        margin-top: 6px;
    }
    .b5 img{
        height: 3vh; 
    }
    .b5 div{
        display: flex;
    }
    .b5 span{
        line-height: 3vh;;
    }
</style>